<template>
  <div id="scheme">
    <div class="banner">
      <img src="@/assets/images/scheme/schemeBanner.jpg" alt="益辅康">
    </div>
    <div class="body">
      <div class="content">
        <div class="schemeTitle">
          <span>UPPER LIMB SOLUTIONS</span>
          <h3>上肢解决方案</h3>
        </div>
        <ul class="treeDiagram">
          <li class="node one">
            <div class="leftBranch">
              <span class="branchName">第一步</span>
              <div class="image-text">
                <img src="@/assets/images/scheme/1.jpg">
                <span class="text">
                  入院后专家进行检查患者身体以及残肢条件是否符合安装假肢标准
                </span>
              </div>
            </div>
          </li>
          <li class="node two">
            <div class="rightBranch">
              <span class="branchName">第二步</span>
              <div class="image-text">
                <img src="@/assets/images/scheme/2.jpg">
                <span class="text">
                  根据患者自身条件，提供可实施方案以及假肢处方
                </span>
              </div>
            </div>
          </li>
          <li class="node three">
            <div class="leftBranch">
              <span class="branchName">第三步</span>
              <div class="image-text">
                <img src="@/assets/images/scheme/3.jpg">
                <span class="text">
                  测量患者身体数据，根据个人身体数据制作相适宜假肢
                </span>
              </div>
            </div>
          </li>
          <li class="node four">
            <div class="rightBranch">
              <span class="branchName">第四步</span>
              <div class="image-text">
                <img src="@/assets/images/scheme/4.jpg">
                <span class="text">
                  安装假肢并与患者身体进行适配，确保穿戴期间无任何不适感
                </span>
              </div>
            </div>
          </li>
          <li class="node five">
            <div class="leftBranch">
              <span class="branchName">第五步</span>
              <div class="image-text">
                <img src="@/assets/images/scheme/5.jpg">
                <span class="text">
                  通过康复师制定的一对一康复训练进行假肢康复训练、残肢和接受腔维护等
                </span>
              </div>
            </div>
          </li>
          <li class="node six">
            <div class="rightBranch">
              <span class="branchName">第六步</span>
              <div class="image-text">
                <img src="@/assets/images/scheme/6.jpg">
                <span class="text">
                  确保患者能够舒适穿戴并且正常使用后可进行出院，以及自主训练指导
                </span>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'schemePage'
}
</script>

<style scoped>
.banner {
  height: 150px;
  overflow: hidden;
  border-radius: 5px;
  border: 1px solid #000;
}
.schemeTitle span{
  display: inline-block;
  width: 100%;
  text-align: center;
  font-size: 10px;
}
.schemeTitle h3{
  text-align: center;
  margin-bottom: 15px;
  font-weight: 700;
  color: #21287f;
  font-size: 20px;
}
.body{
  margin-bottom: 80px;
  font-size: 14px;
}
.treeDiagram{
  width: 1px;
  height: 340px;
  background-color:#a9abcd;
  position: absolute;
  left: 50%;
}
.node{
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #21287f;
  position: relative;
  left: -4.5px;
}
.node .leftBranch,
.node .rightBranch{
  position: absolute;
  left: -20px;
  top: 50%;
  width: 20px;
  height: 1px;
  background-color: #21287f;
}
.node .leftBranch .branchName,
.node .rightBranch .branchName{
  display: inline-block;
  width: 50px;
  font-size: 10px;
  font-weight: 700;
  position: relative;
  left: -35px;
  top: -13px;
  color: #21287f;
}
.node .leftBranch .image-text,
.node .rightBranch .image-text{
  position: relative;
  left: -75px;
  top: -10px;
  vertical-align: middle;
}
.node .leftBranch .image-text img,
.node .rightBranch .image-text img{
  width: 80px;
  height: 80px;
  object-fit: cover;
}
.node .leftBranch .image-text .text,
.node .rightBranch .image-text .text{
  display: inline-block;
  width: 80px;
  height: 80px;
  position: relative;
  left: -83px;
  top: -80px;
  font-size: 10px;
  word-break: break-all;
  padding: 3px;
}
.node .rightBranch{
  left: 10px;
}
.node .rightBranch .branchName{
  left: 25px;
}
.node .rightBranch .image-text{
  left: 15px;
}
.node .rightBranch .image-text .text{
  left: 83px;
}
.one{
  top: 10px;
}
.two{
  top: 52px;
}
.three{
  top: 100px;
}
.four{
  top: 145px;
}
.five{
  top: 190px;
}
.six{
  top: 235px;
}
.seven{
  top: 280px;
}
</style>
